<template>
  <div class="app-container">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
      <el-card>
        <el-row :gutter="15">
          <title-line title="交易参数设置" />
          <el-col :lg="14" :xl="10">
            <el-form-item label="库存减扣规则：" required prop="storeRule">
              <el-radio-group v-model="formData.storeRule">
                <el-radio
                  v-for="(item, index) in SKU_DECREMENT_STATUS"
                  :key="index"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="付款等待时间：" prop="orderCancelTime">
              <el-row>
                <el-col :span="20">
                  <el-input
                    v-model="formData.orderCancelTime"
                    placeholder="请输入付款等待时间"
                    clearable
                  />
                </el-col>
                <el-col :span="4">
                  <span class="ml-10">分钟</span>
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="自动收货时间：" prop="orderReceiveTime">
              <el-row>
                <el-col :span="20">
                  <el-input
                    v-model="formData.orderReceiveTime"
                    placeholder="请输入自动收货时间"
                    clearable
                  />
                </el-col>
                <el-col :span="4">
                  <span class="ml-10">天</span>
                </el-col>
              </el-row>
              <p class="subtitle-input-text">订单发货后，多少天订单状态变成待评价</p>
            </el-form-item>

            <el-form-item label="自动评价时间：" prop="orderAppraiseTime">
              <el-row>
                <el-col :span="20">
                  <el-input
                    v-model="formData.orderAppraiseTime"
                    placeholder="请输入自动评价时间"
                    clearable
                  />
                </el-col>
                <el-col :span="4">
                  <span class="ml-10">天</span>
                </el-col>
                <p class="subtitle-input-text">订单收货后，</p>
              </el-row>
            </el-form-item>
            <el-form-item label="自动完结时间：" prop="orderFinishTime">
              <el-row>
                <el-col :span="20">
                  <el-input
                    v-model="formData.orderFinishTime"
                    placeholder="请输入自动完结时间"
                    clearable
                  />
                </el-col>
                <el-col :span="4">
                  <span class="ml-10">天</span>
                </el-col>
              </el-row>
              <p class="subtitle-input-text">订单收货后，多少天订单状态变为已完成</p>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="15">
          <title-line title="积分参数设置" />
          <el-col class="flex">
            <el-form-item label="新人赠送积分：">
              <el-radio-group v-model="formData.isNewUserGive">
                <el-radio v-for="(item, index) in NEW_USER_GIVE" :key="index" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="flex" v-if="formData.isNewUserGive">
              <el-form-item label="" label-width="10px" prop="newUserGiveMin">
                <el-input
                  style="width: 200px"
                  v-model="formData.newUserGiveMin"
                  placeholder="请输入最小赠送积分值"
                  clearable
                />
              </el-form-item>
              <p class="pt-10 ml-5 mr-5">至</p>
              <el-form-item label="" label-width="0" prop="newUserGiveMax">
                <el-input
                  style="width: 200px"
                  v-model="formData.newUserGiveMax"
                  placeholder="请输入最大赠送积分值"
                  clearable
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col class="flex">
            <el-form-item label="积分预警值">
              <el-radio-group v-model="formData.isQuotaWarn">
                <el-radio v-for="(item, index) in QUAT_WARNW" :key="index" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="flex" v-if="formData.isQuotaWarn">
              <el-form-item label="超过" label-width="50px" prop="quotaWarn">
                <el-input
                  style="width: 200px"
                  v-model="formData.quotaWarn"
                  placeholder="请输积分值预警值"
                  clearable
                />
              </el-form-item>
              <p class="pt-10 ml-5 mr-5">积分后进行提示</p>
            </div>
          </el-col>
          <!-- 预警列表 -->
          <el-col :offset="2" :lg="24" :xl="12" v-if="formData.isQuotaWarn">
            <el-alert
              style="width: 400px"
              class="mb-10"
              title="单笔消费超过预警值后系统自动给提醒人发送短信消息"
              type="info"
              :closable="false"
            >
            </el-alert>
            <div class="flex" v-for="(item, index) in formData.warnReminderList" :key="index">
              <el-form-item
                :label="`提醒人${index + 1}：`"
                label-width="100px"
                :prop="'warnReminderList.' + index + '.phone'"
                :rules="{
                  required: true,
                  message: '提醒人电话不能为空',
                  trigger: 'blur'
                }"
              >
                <el-input
                  style="width: 200px"
                  v-model="item.phone"
                  placeholder="请输入提醒人联系电话"
                  clearable
                />
              </el-form-item>
              <el-form-item label="备注" label-width="50px">
                <el-input
                  style="width: 200px"
                  v-model="item.name"
                  placeholder="请输入备注人信息"
                  clearable
                />
              </el-form-item>
              <el-link
                :underline="false"
                class="ml-5 mb-5"
                type="primary"
                style="height: 36px"
                @click="deleteConcats(index)"
                >删除</el-link
              >
            </div>
            <el-link
              :underline="false"
              style="margin-left: 100px"
              type="primary"
              @click="addConcats"
              >+添加提醒人</el-link
            >
          </el-col>
        </el-row>

        <!-- 平台抽成设置 -->
        <el-row :gutter="15">
          <title-line title="平台抽成设置" />
          <el-col :lg="12" :xl="10">
            <el-form-item label="平台服务费：" prop="platformRate">
              <div class="deal-box">
                <el-input
                  v-model="formData.platformRate"
                  placeholder="请输入平台服务费抽成比例（0-100）"
                  style="width: 300px"
                />
                <p class="text">交易订单单笔平台抽成，平台抽成=订单实付金额*平台抽成比例</p>

                <span class="icon">%</span>
              </div>
            </el-form-item>
            <el-form-item label="交易手续费：" prop="costRate">
              <div class="deal-box">
                <el-input
                  v-model="formData.costRate"
                  placeholder="请输入银联交易手续费抽成比例（0.01-10）"
                  style="width: 300px"
                />
                <p class="text">支付服务方比如微信的支付手续费</p>
                <span class="icon">%</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-form-item class="mt-20" style="text-align: center">
        <el-button @click="getSet"> 取消 </el-button>
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import rulesMixins from './deal-rules'
import { TURN_ON_STATUS } from '@/enum'
import { SKU_DECREMENT_STATUS, NEW_USER_GIVE, QUAT_WARNW } from '@/enum/setting'
export default {
  mixins: [rulesMixins],
  data() {
    return {
      formData: {
        // 付款等待时间，单位分钟，到期未付款订单自动取消
        orderCancelTime: '',
        // 	系统自动评价，单位天
        orderAppraiseTime: '',
        // 系统自动订单完结，单位天
        orderFinishTime: '',
        // 库存扣减规则 1:拍下减库存 2:付款减库存
        storeRule: 1,
        // 系统自动收货，单位天
        orderReceiveTime: '',
        // 是否新人赠送积分
        isNewUserGive: false,
        // 新人赠送积分最小值
        newUserGiveMin: 10,
        // 新人赠送积分最大值
        newUserGiveMax: 100,
        // 是否开启积分预警值
        isQuotaWarn: false,
        // 	积分预警值, 0=不预警
        quotaWarn: 0,
        // 提醒人列表
        warnReminderList: [
          {
            phone: '',
            name: ''
          }
        ],

        // 平台服务费抽成
        platformRate: '',

        // 交易手续费
        costRate: ''
      },
      dataSource: [],
      isGuaranteeOptions: [
        {
          label: '开启',
          value: true
        },
        {
          label: '关闭',
          value: false
        }
      ],
      bankOpenOptions: [
        {
          label: '开启',
          value: 1
        },
        {
          label: '关闭',
          value: 0
        }
      ]
    }
  },
  computed: {
    TURN_ON_STATUS() {
      return TURN_ON_STATUS
    },
    SKU_DECREMENT_STATUS() {
      return SKU_DECREMENT_STATUS
    },
    // 是否新人赠送积分
    NEW_USER_GIVE() {
      return NEW_USER_GIVE
    },
    // 积分预警值列表
    QUAT_WARNW() {
      return QUAT_WARNW
    }
  },
  watch: {},
  created() {
    // 获取交易设置信息
    this.getSet()
  },
  mounted() {},
  methods: {
    // 获取交易设置信息
    async getSet() {
      try {
        const { data } = await this.$http.system.deal.getSet()
        for (const key in data) {
          this.formData[key] = data[key]
        }
        this.formData.isQuotaWarn = this.formData.quotaWarn ? true : false
        // this.formData.corporateCount = this.formData.corporateCount ? 1 : 0
      } catch (error) {
        console.log('getSet', error)
      }
    },

    /**
     * 删除提醒人
     * @param {Number} index 在formData.concats中下标
     */
    deleteConcats(index) {
      this.formData.warnReminderList = this.formData.warnReminderList.filter(
        (el, elIndex) => index !== elIndex
      )
    },

    // 点击添加提醒人
    addConcats() {
      this.formData.warnReminderList.push({ phone: '', name: '' })
    },

    submitForm() {
      // console.log(123456)

      this.$refs.elForm.validate(async valid => {
        if (!valid) return false
        const { status, msg } = await this.$http.system.deal.update(this.formData)
        if (status === 200) {
          this.$message.success('修改成功')
          this.getSet()
        } else {
          this.$message.error(msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.subtitle-input-text {
  font-size: 12px !important;
  color: $hw-text-color-title !important;
}
.deal-box {
  position: relative;
  .text {
    color: #b0b0b0;
  }
  .icon {
    position: absolute;
    top: 0px;
    right: 20px;
    font-weight: 600;
  }
}
</style>
